<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(function() {
		//默认对话框是关闭的
		$('#updataDish').dialog('close');
		//默认对话框是关闭的
		$('#insertDish').dialog('close');
		//默认对话框是关闭的
		$('#uploadImageDish').dialog('close');
		//默认对话框是关闭的
		$('#insertAllDish').dialog('close');
		//配置修改表单
		$("#upDish").form(
				{
					url : '${pageContext.request.contextPath}/updateDish',
					success : function(data) {
						if (data == "1") {
							$('#updataDish').dialog('close');
							$("#upDish").form('clear');
							$.messager.alert('我的消息', '更新成功', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						} else {
							$('#updataDish').dialog('close');
							$("#upDish").form('clear');
							$.messager.alert('我的消息', '更新失败,请检查菜品是否重名', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						}
					}
				})
		//配置添加表单
		$("#inDish").form(
				{
					url : '${pageContext.request.contextPath}/insertDish',
					success : function(data) {
						if (data == "1") {
							$('#insertDish').dialog('close');
							$("#inDish").form('clear');
							$.messager.alert('我的消息', '添加成功，点击确定继续操作', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						} else {
							$('#insertDish').dialog('close');
							$("#inDish").form('clear');
							$.messager.alert('我的消息', '添加失败,请检查菜品是否重名', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						}
					}
				})
		//配置批量添加表单
		$("#inseAllDish").form(
				{
					url : '${pageContext.request.contextPath}/insertAllDish',
					success : function(data) {
						if (data == "1") {
							$('#insertAllDish').dialog('close');
							$("#inAllDish").form('clear');
							$.messager.alert('我的消息', '添加成功', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						} else {
							$('#insertAllDish').dialog('close');
							$("#inAllDish").form('clear');
							$.messager.alert('我的消息', '添加失败,请检查菜品是否重名', 'info',
									function() {
										$('#stuMsg').datagrid('reload');
									});
						}
					}
				})
		$.extend($.fn.validatebox.defaults.rules, {
			number : {
				validator : function(value) {
					var reg = /^[0-9]*$/;
					return reg.test(value);
				},
				message : '请输入数字'
			},
			//图片文件名后缀 
			Number : {
				validator : function(value) {
					var reg = /[.png|.jpg]$/;
					return reg.test(value);
				},
				message : '请选择正确的文件'
			},
			//excel文件名后缀  
			CHS : {
				validator : function(value) {
					return /.xls$/.test(value);
				},
				message : '请选择正确的文件，文件后缀.xls'
			},
			//验证汉字  
			china : {
				validator : function(value) {
					return /^[\u0391-\uFFE5]+$/.test(value);
				},
				message : '请输入汉字'
			},
		})
		//配置上传图片表单
		$("#uploadImgDish").form({
			url : '${pageContext.request.contextPath}/uploadImgDish',
			success : function(data) {
				if (data == "1") {
					$('#uploadImageDish').dialog('close');
					$("#uploadImgDish").form('clear');
					$.messager.alert('我的消息', '添加成功', 'info', function() {
						$('#stuMsg').datagrid('reload');
					});
				} else {
					$('#uploadImageDish').dialog('close');
					$("#uploadImgDish").form('clear');
					$.messager.alert('我的消息', '添加失败', 'info', function() {
						$('#stuMsg').datagrid('reload');
					});
				}
			}
		})
		//配置搜索框
		$('#searchDish').searchbox({
			searcher : function(value, name) {
				var dname = value;
				$('#stuMsg').datagrid('reload', {
					searchname : dname
				});
			}
		});
		//配置数据表格
		$('#stuMsg')
				.datagrid(
						{
							url : '${pageContext.request.contextPath}/findDish',
							columns : [ [
									{
										field : 'checked',
										checkbox : true,
										width : 100
									},
									{
										field : 'did',
										title : '菜品编号',
										width : 200,
										hidden : true
									},
									{
										field : 'dname',
										title : '菜品名称',
										width : 200
									},
									{
										field : 'dnum',
										title : '菜品数量',
										width : 200,
										align : 'right'
									},
									{
										field : 'dprice',
										title : '菜品价格',
										width : 200,
										align : 'right'
									},
									{
										field : 'dcreatetime',
										title : '创建时间',
										width : 160,
										align : 'right'
									},
									{
										field : 'dtemp1',
										title : '菜品图片',
										width : 200,
										align : 'center',
										formatter : function(value, row, index) { //关键：格式化，并返回一个img标签
											return '<img width="60%" height="80px" src="'
													+ row.dtemp1 + '"/>'
										},
									} ] ],
							pagination : true,
							toolbar : [
									{
										iconCls : 'icon-add',
										text : '新增',
										handler : function() {
											$('#insertDish').dialog('open');
										}
									},
									'-',
									{
										iconCls : 'icon-remove',
										text : '删除',
										handler : function() {
											var dishs = $("#stuMsg").datagrid(
													'getSelections');
											var did = [];
											for (var i = 0; i < dishs.length; i++) {
												did[i] = dishs[i].did;
											}
											if (dishs.length < 1) {
 												$.messager.alert('提示','请选择数据进行删除！')
											} else {
												$.messager
														.confirm(
																'提示',
																'是否确定删除',
																function(r) {
																	if (r) {
																		$
																				.ajax({
																					type : 'post',
																					url : '${pageContext.request.contextPath}/deleteDish',
																					dataType : 'text',
																					data : {
																						'did' : did
																					},
																					success : function(
																							data) {
																						if (data = "1") {
																							$.messager
																									.alert(
																											'我的消息',
																											'删除成功',
																											'info',
																											function() {
																												$(
																														'#stuMsg')
																														.datagrid(
																																'reload');
																											});
																						} else {
																							$.messager
																									.alert(
																											'我的消息',
																											'删除失败，请重试',
																											'info',
																											function() {
																												$(
																														'#stuMsg')
																														.datagrid(
																																'reload');
																											});
																						}
																					}
																				})
																	} else {
																		$(
																				"#stuMsg")
																				.datagrid(
																						'unselectAll');
																	}
																})

											}
										}
									},
									'-',
									{
										iconCls : 'icon-edit',
										text : '修改',
										handler : function() {
											var dishs = $("#stuMsg").datagrid(
													'getSelections');
											if (dishs.length != 1) {
												$.messager
														.confirm(
																'提示',
																'请选择一条数据',
																function(r) {
																	if (r) {
																		$(
																				"#stuMsg")
																				.datagrid(
																						'unselectAll');
																	}
																})
											} else {
												$('#updataDish').dialog('open');
												var dish = dishs[0];
												$('#upDish').form('load', dish);

											}
										}
									},
									'-',
									{
										iconCls : 'icon-add',
										text : '批量导入',
										handler : function() {
											$('#insertAllDish').dialog('open');
										}
									},
									'-',
									{
										iconCls : 'icon-large-clipart',
										text : '上传图片',
										handler : function() {
											var dishs = $("#stuMsg").datagrid(
													'getSelections');
											if (dishs.length != 1) {
												$.messager
														.confirm(
																'提示',
																'请选择一条数据',
																function(r) {
																	if (r) {
																		$(
																				"#stuMsg")
																				.datagrid(
																						'unselectAll');
																	}
																})
											} else {
												$('#uploadImageDish').dialog(
														'open');
												var dish = dishs[0];
												$('#uploadImgDish').form(
														'load', dish);

											}
										}
									} ],
							striped : true,
							rownumbers : true
						});
	})
	//配置更新表单提交事件
	function updataForm() {
		$("#upDish").form('submit');
	}
	//配置添加表单提交事件
	function insertForm() {
		$("#inDish").form('submit');
	}
	//配置批量添加表单提交事件
	function insertAllForm() {
		$("#inseAllDish").form('submit');
	}
	//配置上传图片表单提交事件
	function uploadImageForm() {
		$("#uploadImgDish").form('submit');
	}
</script>
<body>
	<input id="searchDish" class="easyui-searchbox"
		data-options="prompt:'输入菜名查询信息',width:150">
	<table id="stuMsg"></table>
	<!-- 修改的对话框 -->
	<div id="updataDish" class="easyui-dialog" title="修改菜品信息"
		style="width: 300px; height: 360px;"
		data-options="modal:true,draggable:false">
		<form id="upDish" method="post">
			<div style="margin-bottom: 20px; display: none;">
				<span>菜品id</span> <input class="easyui-textbox" name="did"
					style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品名称</span> <input class="easyui-textbox" name="dname"
					style="width: 100%"
					data-options="required:'true',validType:'china'">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品数量</span> <input class="easyui-textbox" name="dnum"
					style="width: 100%"
					data-options="required:'true',validType:'number'">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品价格</span> <input class="easyui-textbox" name="dprice"
					style="width: 100%;"
					data-options="required:'true',validType:'number'">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="updataForm()" style="width: 80px">提交</a>
		</div>
	</div>
	<!-- 添加的对话框 -->
	<div id="insertDish" class="easyui-dialog" title="添加菜品信息"
		style="width: 300px; height: 360px;"
		data-options="modal:true,draggable:false">
		<form id="inDish" method="post" enctype="multipart/form-data">
			<div style="margin-bottom: 20px">
				<span>菜品名称</span> <input class="easyui-textbox" name="dname"
					style="width: 100%"
					data-options="required:'true',validType:'china'">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品数量</span> <input class="easyui-textbox" name="dnum"
					style="width: 100%"
					data-options="required:'true',validType:'number'">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品价格</span> <input class="easyui-textbox" name="dprice"
					style="width: 100%;"
					data-options="required:'true',validType:'number'">
			</div>
			<div style="margin-bottom: 40px">
				<input id="upImageDish" name="path" class="easyui-filebox"
					labelPosition="top"
					data-options="prompt:'请选择图片',buttonText:'请选择',required:'true',validType:'Number'"
					style="width: 100%">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="insertForm()" style="width: 80px">提交</a>
		</div>
	</div>
	<!-- 批量添加的对话框 -->
	<div id="insertAllDish" class="easyui-dialog" title="批量添加菜品信息"
		style="width: 300px; height: 260px;"
		data-options="modal:true,draggable:false">
		<form id="inseAllDish" method="post" enctype="multipart/form-data">
			<!--<div style="margin-bottom:20px">
			<input id="inAllDish" value="请选择文件" class="easyui-combotree" data-options="" style="width:100%">
		</div>-->
			<div style="margin-top: 40px">
				<input id="inAllDish" name="path" class="easyui-filebox"
					labelPosition="top"
					data-options="prompt:'请选择文件',buttonText:'请选择',required:'true',validType:'CHS'"
					style="width: 100%">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0; margin-top: 40px">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="insertAllForm()" style="width: 80px">提交</a>
		</div>
	</div>
	<!-- 上传图片的对话框 -->
	<div id="uploadImageDish" class="easyui-dialog" title="上传菜品图片信息"
		style="width: 300px; height: 260px;"
		data-options="modal:true,draggable:false">
		<form id="uploadImgDish" method="post" enctype="multipart/form-data">
			<div style="margin-top: 40px">
				<input id="upImageDish" name="path" class="easyui-filebox"
					labelPosition="top"
					data-options="prompt:'请选择图片',buttonText:'请选择',required:'true',validType:'Number'"
					style="width: 100%">
			</div>
			<div style="margin-bottom: 20px; display: none;">
				<span>菜品id</span> <input class="easyui-textbox" name="did"
					style="width: 100%;">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0; margin-top: 40px">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="uploadImageForm()" style="width: 80px">提交</a>
		</div>
	</div>
</body>
</html>